<template>
  <view class="price-container">
    <view class="price-content">
      <view class="price-top">
        <view class="price-title">客户选择</view>
        <xfl-select
          :init-value="editForm.hospital_name"
          :list="hospitalList"
          :clearable="false"
          :show-item-num="5"
          :list-show="false"
          :isCan-input="false"
          :focus-show-list="true"
          :placeholder="'请选择'"
          :select-hide-type="'hideAll'"
          @change="changeHospital"
        />
        <view class="price-row" style="margin-top: 30rpx">
          <view
            v-for="i in typeList"
            :key="i.value"
            class="price-row-item"
            :class="{
              typeActive: editForm.df_price_type == i.value,
            }"
            @click="editForm.df_price_type = i.value"
          >
            {{ i.label }}
          </view>
        </view>
        <view v-if="editForm.df_price_type == 1">
          <view class="price-title">电费单价</view>
          <u-input
            v-model="editForm.df_price"
            placeholder="请输入"
            type="digit"
            :custom-style="{ width: '200rpx' }"
          >
            <template slot="suffix">
              <text>元</text>
            </template>
          </u-input>
        </view>
        <view v-if="editForm.df_price_type == 2">
          <view class="price-title">峰值电费</view>
          <u-input
            v-model="editForm.fz_df_price"
            placeholder="请输入"
            type="digit"
            :custom-style="{ width: '200rpx' }"
          >
            <template slot="suffix">
              <text>元</text>
            </template>
          </u-input>
        </view>
      </view>
      <view v-if="editForm.df_price_type == 2" class="price-box">
        <view class="price-title"> 时段设置 </view>
        <view class="times" @click="showTimePicker('maxPriceTime')">
          <text v-if="maxPriceTime">{{ maxPriceTime }}</text>
          <text v-else>选择时间段</text>
          <u-icon name="clock" color="#1A66FF" />
        </view>
      </view>
      <view v-if="editForm.df_price_type == 2" class="price-top">
        <view class="price-title">谷值电费</view>
        <u-input
          v-model="editForm.gz_df_price"
          placeholder="请输入"
          type="digit"
          :custom-style="{ width: '200rpx' }"
        >
          <template slot="suffix">
            <text>元</text>
          </template>
        </u-input>
      </view>
      <view v-if="editForm.df_price_type == 2" class="price-box">
        <view class="price-title"> 时段设置 </view>
        <view class="times" @click="showTimePicker('minPriceTime')">
          <text v-if="minPriceTime">{{ minPriceTime }}</text>
          <text v-else>选择时间段</text>
          <u-icon name="clock" color="#1A66FF" />
        </view>
      </view>
      <view v-if="editForm.df_price_type == 2" class="price-top">
        <view class="price-title">平值电费</view>
        <u-input
          v-model="editForm.pz_df_price"
          placeholder="请输入"
          type="digit"
          :custom-style="{ width: '200rpx' }"
        >
          <template slot="suffix">
            <text>元</text>
          </template>
        </u-input>
      </view>
      <view v-if="editForm.df_price_type == 2" class="price-box">
        <view class="price-title"> 时段设置 </view>
        <view class="times" @click="showTimePicker('avgPriceTime')">
          <text v-if="avgPriceTime">{{ avgPriceTime }}</text>
          <text v-else>选择时间段</text>
          <u-icon name="clock" color="#1A66FF" />
        </view>
      </view>
    </view>
    <view
      class="price-btn"
      :class="{ disabled: !editForm.hospital_id }"
      @click="handleSubmit"
    >
      保存
    </view>
    <u-popup :show="dateShow" round="40rpx" @close="closeDate">
      <view class="date-picker">
        <view class="date-picker-title">
          <text style="color: #666" @click="closeDate">取消</text>
          <text>选择时间段</text>
          <text style="color: #409eff" @click="confirmDate">确定</text>
        </view>
        <view class="date-grid">
          <view
            v-for="(i, k) in dateList"
            :key="k"
            class="date-time"
            :class="{
              'date-active': dateChecked.includes(i),
              'date-disabled': selectedList.includes(i),
            }"
            @click="handleCheck(i)"
          >
            {{ i }}
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import xflSelect from "@/components/xfl-select/xfl-select.vue";
export default {
  components: {
    xflSelect,
  },
  data() {
    return {
      editForm: {
        hospital_id: "", // 医院id
        hospital_name: "", // 医院名称
        df_price_type: 2, // 计费类型 1: 单价计费 2: 时段计费
        df_price: 0, // 单价电费
        fz_df_price: 0, // 峰值电费
        gz_df_price: 0, // 谷值电费
        pz_df_price: 0, // 平值电费
        time_price: [],
      },
      hospitalList: [], // 医院列表
      typeList: [
        { value: 1, label: "单价计费" },
        { value: 2, label: "时段计费" },
      ],
      maxPriceTime: "", // 峰值电费时段
      minPriceTime: "", // 谷值电费时段
      avgPriceTime: "", // 平值电费时段
      dateShow: false, // 时间选择器
      dateChecked: [], // 时间选择器选中
      selectedList: [], // 时间选择器已选
      timeType: "", // 时间选择器类型
      dateList: [
        "00:00~01:00",
        "01:00~02:00",
        "02:00~03:00",
        "03:00~04:00",
        "04:00~05:00",
        "05:00~06:00",
        "06:00~07:00",
        "07:00~08:00",
        "08:00~09:00",
        "09:00~10:00",
        "10:00~11:00",
        "11:00~12:00",
        "12:00~13:00",
        "13:00~14:00",
        "14:00~15:00",
        "15:00~16:00",
        "16:00~17:00",
        "17:00~18:00",
        "18:00~19:00",
        "19:00~20:00",
        "20:00~21:00",
        "21:00~22:00",
        "22:00~23:00",
        "23:00~24:00",
      ],
    };
  },
  mounted() {
    this.getHospital();
  },
  methods: {
    // 获取医院列表
    getHospital() {
      this.$https.post("/hospital/getHospitalList").then((res) => {
        if (res.code == 1) {
          this.hospitalList = res.data.map((item) => {
            return {
              ...item,
              value: item.name,
            };
          });
        }
      });
    },
    // 选择医院
    changeHospital(val) {
      const row = this.hospitalList.find((i) => i.value == val.newVal);
      this.editForm.hospital_id = row.id;
      this.editForm.hospital_name = row.value;
      this.editForm.df_price_type = row.df_price_type;
      this.editForm.df_price = row.df_price;
      this.editForm.fz_df_price = row.fz_df_price;
      this.editForm.gz_df_price = row.gz_df_price;
      this.editForm.pz_df_price = row.pz_df_price;
      let times = row.time_price ? JSON.parse(row.time_price) : [];
      this.editForm.time_price = times;
      this.maxPriceTime = times
        .filter((i) => i.type == 3)
        .map((i) => i.start_time + "~" + i.end_time)
        .join(",");
      this.minPriceTime = times
        .filter((i) => i.type == 1)
        .map((i) => i.start_time + "~" + i.end_time)
        .join(",");
      this.avgPriceTime = times
        .filter((i) => i.type == 2)
        .map((i) => i.start_time + "~" + i.end_time)
        .join(",");
    },
    // 显示时间选择器
    showTimePicker(val) {
      this.timeType = val;
      let list = this[val].split(",").filter((i) => Boolean(i));
      this.getSelectedList(list);
      this.dateChecked = list;
      this.dateShow = true;
    },
    // 获取已选时间
    getSelectedList(list) {
      let max = this.maxPriceTime.split(",").filter((i) => Boolean(i));
      let min = this.minPriceTime.split(",").filter((i) => Boolean(i));
      let avg = this.avgPriceTime.split(",").filter((i) => Boolean(i));
      this.selectedList = [...max, ...min, ...avg].filter((i) => !list.includes(i));
    },
    // 勾选时间
    handleCheck(val) {
      if (this.dateChecked.includes(val)) {
        this.dateChecked = this.dateChecked.filter((i) => i != val);
      } else {
        this.dateChecked.push(val);
      }
    },
    // 关闭时间选择器
    closeDate() {
      this.dateShow = false;
      this.timeType = "";
      this.dateChecked = [];
    },
    // 确定时间
    confirmDate() {
      this[this.timeType] = this.dateChecked.join(",");
      this.dateShow = false;
      this.dateChecked = [];
    },
    // 提交
    async handleSubmit() {
      let data = Object.assign({}, this.editForm);
      if (!data.hospital_id) {
        uni.showToast({
          title: "请选择医院",
          icon: "none",
        });
        return;
      }
      if (data.df_price_type == 2) {
        let max = this.maxPriceTime.split(",").filter((i) => Boolean(i));
        let min = this.minPriceTime.split(",").filter((i) => Boolean(i));
        let avg = this.avgPriceTime.split(",").filter((i) => Boolean(i));
        if (max.length == 0 || min.length == 0) {
          uni.showToast({
            title: "峰值、谷值时段不能为空",
            icon: "none",
          });
          return;
        }
        if ([...max, ...min, ...avg].length < 24) {
          const tip = await this.modalTip();
          if (!tip) return;
          this.avgPriceTime = this.dateList
            .filter((i) => ![...max, ...min].includes(i))
            .join(",");
        }
        data.time_price = this.dateList.map((i) => {
          let [start_time, end_time] = i.split("~");
          return {
            start_time,
            end_time,
            type: this.minPriceTime.includes(i)
              ? 1
              : this.maxPriceTime.includes(i)
              ? 3
              : 2,
          };
        });
        delete data.df_price;
      } else {
        delete data.fz_df_price;
        delete data.gz_df_price;
        delete data.pz_df_price;
        delete data.time_price;
      }
      delete data.hospital_name;
      this.$https.post("/environment/hospitalEnvironmentUp", data).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: "操作成功",
            icon: "success",
          });
        }
      });
    },
    // 提示
    modalTip() {
      return new Promise((resolve, reject) => {
        uni.showModal({
          title: "温馨提示",
          content: "剩余未选择时段将默认为平值时段！",
          showCancel: true,
          success: ({ confirm, cancel }) => {
            if (confirm) {
              resolve(true);
            } else {
              resolve(false);
            }
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.price-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f7f8fb;
  padding: 30rpx;
  box-sizing: border-box;
  .price-content {
    background-color: #fff;
    border-radius: 10rpx;
    min-height: calc(100vh - 200rpx);
    box-sizing: border-box;
    margin-bottom: 140rpx;
    .price-title {
      display: flex;
      align-items: center;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #000000;
    }
    .price-top {
      padding: 0 30rpx;
    }
    .price-box {
      padding: 0 30rpx;
      border-bottom: 1rpx solid #e8ebf2;
      &:last-child {
        border-bottom: none;
        padding-bottom: 20rpx;
      }
      .times {
        border: 1rpx solid #e6e6e6;
        border-radius: 10rpx;
        height: 70rpx;
        line-height: 70rpx;
        width: 400rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        text {
          color: #777777;
          font-size: 26rpx;
          width: 320rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .price-row {
      display: flex;
      align-items: center;
      &-item {
        padding: 16rpx 40rpx;
        font-size: 24rpx;
        color: #000000;
        background-color: #f5f6f8;
        border-radius: 8rpx;
        margin-right: 20rpx;
        &:last-child {
          margin-right: 0;
        }
      }
      .typeActive {
        background-color: #e7eefd;
        color: #1a66ff;
        font-weight: bold;
      }
    }
    .mb20 {
      margin-bottom: 20rpx;
    }
  }
  .price-btn {
    position: fixed;
    bottom: 30rpx;
    left: 30rpx;
    right: 30rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    color: #fff;
    z-index: 98;
    border-radius: 50rpx;
    background-color: #1a66ff;
  }
  .disabled {
    background-color: #cccccc !important;
  }
}
.date-picker {
  .date-picker-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    padding: 0 40rpx;
  }
  .date-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20rpx;
    overflow-y: auto;
    height: 50vh;
    padding: 20rpx;
    .date-time {
      padding: 10rpx 20rpx;
      border: 1rpx solid #b3cbf9;
      &:active {
        background-color: #ebf1fd;
      }
    }
    .date-active {
      background-color: #9cc8f2;
      border: 1rpx solid #63a7e6;
      &:active {
        background-color: #9cc8f2;
      }
    }
    .date-disabled {
      background-color: #eeeeee !important;
      border: 1rpx solid #eeeeee !important;
      &:active {
        background-color: #eeeeee !important;
      }
    }
  }
}
</style>
